<template>
  <div>
    <el-table :data="pageInfo.tableData"
              border
              style="width: 100%"
              height="500"
              :row-style="{height:90+'px'}">
      <el-table-column prop=""
                       label="选择"
                       align="center">
        <input type="checkbox">
      </el-table-column>
      <el-table-column prop="drugstoreName"
                       label="药店名称"
                       align="center">
      </el-table-column>
      <el-table-column label="列表图"
                       align="center">
        <template slot-scope="scope">
          <img :src="scope.row.image"
               style="height:50%;width:50%">
        </template>
      </el-table-column>
      <el-table-column prop="uploader"
                       label="上传人"
                       align="center">
      </el-table-column>
      <el-table-column prop="gmtCreate"
                       label="上传时间"
                       align="center">
      </el-table-column>
      <el-table-column prop=""
                       label="操作"
                       align="center">
        <template slot-scope="scope">
          <el-row :gutter="5">
            <el-col :span="10">
              <el-button type="text"
                         @click="info(scope.row)"
                         size="mini">查看详情</el-button>
            </el-col>
            <el-col :span="7">
              <el-button type="text"
                         @click="update(scope.row)"
                         size="mini">编辑</el-button>
            </el-col>
            <el-col :span="7">
              <el-button type="text"
                         @click="del(scope.row)"
                         size="mini">删除</el-button>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex"
            align="middle">
      <el-col :span="3">
        <input type="checkbox"
               id="checkall">全选
      </el-col>
      <el-col :span="3">
        <el-button type="danger"
                   id="delall"
                   size="mini">批量删除</el-button>
      </el-col>
      <el-col :span="18">
        <el-pagination @current-change="handleCurrentChange"
                       :current-page.sync="request.pageNum"
                       :page-size="request.pageSize"
                       layout="total, prev, pager, next"
                       :total="pageInfo.total">
        </el-pagination>
      </el-col>
    </el-row>
    <!-- 查看详情的对话框 -->
    <el-dialog :visible.sync="dialogVisble.infoDialogVisble"
               width="30%"
               :center="true">
      <div>
        <el-row>
          <font>{{dialogData.infoDialogData.drugstoreName}}</font>
        </el-row>
        <el-row>
          <el-col :span="12">图片</el-col>
          <el-col :span="12">
            <div>所在地区:{{dialogData.infoDialogData.province}} &nbsp; {{dialogData.infoDialogData.city}}</div>
            <div>详细地址:{{dialogData.infoDialogData.detailAddr}}</div>
            <div>药店电话:{{dialogData.infoDialogData.telPhone}}</div>
          </el-col>
        </el-row>
        <el-row>
          <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{dialogData.infoDialogData.description}}</p>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "DepartmentsData",
  data () {
    return {
      pageInfo: {
        tableData: [],

        total: 0,

      },
      request: {
        pageNum: 1,
        pageSize: 5,
        drugstoreName: "",
        province: "",
        city: ""
      },
      dialogVisble: {
        infoDialogVisble: false
      },
      dialogData: {
        infoDialogData: {}
      }
    }
  },

  created () {
    this.$axios.get("/drugstore/findDrugstoreInfoByPage?pageNum=1&pageSize=5").then(res => {
      this.pageInfo.tableData = res.data.data.data;
      this.pageInfo.pages = res.data.data.pages;
      this.pageInfo.total = res.data.data.total;
    })
  },
  methods: {
    updateCondition (val) {
      this.request.drugstoreName = val.drugstoreName
      this.request.province = val.province
      this.request.city = val.city
    },
    updateTableData () {
      this.$axios.get("/drugstore/findDrugstoreInfoByPage?pageNum=" + this.request.pageNum + "&pageSize=" + this.request.pageSize + "&drugstoreName=" + this.request.drugstoreName + "&province=" + this.request.province + "&city=" + this.request.city).then(res => {
        this.pageInfo.tableData = res.data.data.data;
        this.pageInfo.total = res.data.data.total;
      })
    },
    handleCurrentChange (val) {
      this.updateTableData();

    },
    info (row) {
      this.dialogVisble.infoDialogVisble = true
      this.dialogData.infoDialogData = row
    },
    update: function (scope) {

    },
    del: function (scope) {
      alert("删除")
    }
  }
}
</script>

<style scoped>
</style>
